<template>
  <el-dialog id="edit-dialog" :title="$t('coupon.ruleToast')" :visible.sync="showState" :destroy-on-close="true" :before-close="handleClose" :close-on-click-modal="false" width="80%">
    <el-row>
      <table class="ruleTable">
        <tr>
          <td colspan="2">
            <h3>{{ $t('coupon.list.ruleInfo.CouponList.desc') }}</h3>
          </td>
        </tr>
        <tr>
          <td>1</td>
          <td>{{ $t('coupon.list.ruleInfo.CouponList.info.one') }}</td>
        </tr>
        <tr>
          <td>2</td>
          <td>{{ $t('coupon.list.ruleInfo.CouponList.info.two') }}</td>
        </tr>
        <tr>
          <td>3</td>
          <td>{{ $t('coupon.list.ruleInfo.CouponList.info.three') }}</td>
        </tr>
      </table>
      <table class="ruleTable">
        <tr>
          <td colspan="5">
            <h3>{{ $t('coupon.list.ruleInfo.preferentialConditions.desc') }}</h3>
          </td>
        </tr>
        <tr>
          <td>{{ $t('coupon.list.table.couponId') }}</td>
          <td>{{ $t('coupon.list.table.offerType') }}</td>
          <td>{{ $t('coupon.list.table.preferentialConditions') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.preferentialConditions.info.amount') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.preferentialConditions.info.remarks') }}</td>
        </tr>
        <tr>
          <td rowspan="2">1</td>
          <td rowspan="2">{{ $t('coupon.list.interestReduction') }}</td>
          <td>{{ $t('coupon.list.setting.loan') }} M,{{ $t('coupon.list.setting.interestReduction') }} N</td>
          <td>N</td>
          <td />
        </tr>
        <tr>
          <td>{{ $t('coupon.list.setting.nothreshold') }}，{{ $t('coupon.list.interestReduction') }} N</td>
          <td>N</td>
          <td />
        </tr>
        <tr>
          <td rowspan="2">2</td>
          <td rowspan="2">{{ $t('coupon.list.interestrateReduction') }}</td>
          <td>{{ $t('coupon.list.setting.loan') }}, {{ $t('coupon.list.offertips.interestReduction') }} N %</td>
          <td>{{ $t('coupon.list.offertips.lendRateMoney') }} * N %</td>
          <td />
        </tr>
        <tr>
          <td>{{ $t('coupon.list.setting.nothreshold') }}, {{ $t('coupon.list.offertips.interestReduction') }} N %</td>
          <td>{{ $t('coupon.list.offertips.lendRateMoney') }} * N %</td>
          <td />
        </tr>
        <tr>
          <td rowspan="2">3</td>
          <td rowspan="2">{{ $t('coupon.list.dayFree') }}</td>
          <td>{{ $t('coupon.list.setting.loan') }}, N {{ $t('coupon.list.offertips.dayFree') }}</td>
          <td>{{ $t('coupon.list.offertips.payMoney') }} * {{ $t('coupon.list.offertips.dailyInterestRate') }} * N</td>
          <td />
        </tr>
        <tr>
          <td>{{ $t('coupon.list.setting.nothreshold') }}, N {{ $t('coupon.list.offertips.dayFree') }}</td>
          <td>{{ $t('coupon.list.offertips.payMoney') }} * {{ $t('coupon.list.offertips.dailyInterestRate') }} * N</td>
          <td />
        </tr>
      </table>
      <table class="ruleTable" style="margin-top: 10px">
        <tr>
          <td colspan="11">
            <h3>{{ $t('coupon.list.ruleInfo.display.desc') }}</h3>
          </td>
        </tr>
        <tr>
          <td>{{ $t('coupon.list.ruleInfo.display.info.a') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.info.b') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.info.c') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.info.d') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.info.e') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.info.f') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.info.g') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.info.h') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.info.i') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.info.j') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.info.k') }}</td>
        </tr>
        <tr>
          <td rowspan="8">1</td>
          <td rowspan="8">{{ $t('coupon.list.initiativeReceive') }}</td>
          <td rowspan="8">{{ $t('coupon.list.ruleInfo.display.vouchers') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.notArrived') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.shutDown') }}</td>
          <td>>=1</td>
          <td>{{ $t('coupon.list.ruleInfo.display.visible') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.clickable') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.notActive') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.pendingNormal') }}</td>
          <td>“{{ $t('coupon.list.ruleInfo.display.stats') }}”</td>
        </tr>
        <tr>
          <td>{{ $t('coupon.list.ruleInfo.display.notArrived') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.shutDown') }}</td>
          <td> &lt;1 </td>
          <td>{{ $t('coupon.list.ruleInfo.display.visible') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.notClickable') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.notActive') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.haveFinished') }}</td>
          <td />
        </tr>
        <tr>
          <td>{{ $t('coupon.list.ruleInfo.display.notArrived') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.open') }}</td>
          <td />
          <td>{{ $t('coupon.list.ruleInfo.display.invisible') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.notClickable') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.notActive') }}</td>
          <td />
          <td />
        </tr>
        <tr>
          <td>{{ $t('coupon.list.ruleInfo.display.inside') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.shutDown') }}</td>
          <td>>=1</td>
          <td>{{ $t('coupon.list.ruleInfo.display.visible') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.clickable') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.effective') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.pendingNormal') }}</td>
          <td>“{{ $t('coupon.list.ruleInfo.display.stats') }}”</td>
        </tr>
        <tr>
          <td>{{ $t('coupon.list.ruleInfo.display.inside') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.shutDown') }}</td>
          <td>&lt;1</td>
          <td>{{ $t('coupon.list.ruleInfo.display.visible') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.notClickable') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.effective') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.haveFinished') }}</td>
          <td />
        </tr>
        <tr>
          <td>{{ $t('coupon.list.ruleInfo.display.inside') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.open') }}</td>
          <td />
          <td>{{ $t('coupon.list.ruleInfo.display.visible') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.notClickable') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.effective') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.haveFinished') }}</td>
          <td />
        </tr>
        <tr>
          <td>{{ $t('coupon.list.ruleInfo.display.passed') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.shutDown') }}</td>
          <td />
          <td>{{ $t('coupon.list.ruleInfo.display.visible') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.notClickable') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.invalid') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.expired') }}</td>
          <td />
        </tr>
        <tr>
          <td>{{ $t('coupon.list.ruleInfo.display.passed') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.open') }}</td>
          <td />
          <td>{{ $t('coupon.list.ruleInfo.display.invisible') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.notClickable') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.invalid') }}</td>
          <td />
          <td />
        </tr>
      </table>
      <table class="ruleTable">
        <tr>
          <td colspan="11">
            <h3>{{ $t('coupon.list.ruleInfo.directionalPush.desc') }}</h3>
          </td>
        </tr>
        <tr>
          <td>{{ $t('coupon.list.ruleInfo.display.info.a') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.info.b') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.info.c') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.info.d') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.info.e') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.info.f') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.info.g') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.info.h') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.info.i') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.info.j') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.info.k') }}</td>
        </tr>
        <tr>
          <td rowspan="5">2</td>
          <td rowspan="5">{{ $t('coupon.list.ruleInfo.directionalPush.desc') }}</td>
          <td rowspan="5">{{ $t('coupon.list.ruleInfo.directionalPush.discountPopup') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.notArrived') }}</td>
          <td />
          <td />
          <td>{{ $t('coupon.list.ruleInfo.display.invisible') }}</td>
          <td />
          <td>{{ $t('coupon.list.ruleInfo.display.notActive') }}</td>
          <td />
          <td />
        </tr>
        <tr>
          <td>{{ $t('coupon.list.ruleInfo.display.inside') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.shutDown') }}</td>
          <td>>=1</td>
          <td>{{ $t('coupon.list.ruleInfo.display.visible') }}</td>
          <td />
          <td>{{ $t('coupon.list.ruleInfo.display.effective') }}</td>
          <td />
          <td />
        </tr>
        <tr>
          <td>{{ $t('coupon.list.ruleInfo.display.inside') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.shutDown') }}</td>
          <td>&lt;1</td>
          <td>{{ $t('coupon.list.ruleInfo.display.invisible') }}</td>
          <td />
          <td>{{ $t('coupon.list.ruleInfo.display.effective') }}</td>
          <td />
          <td />
        </tr>
        <tr>
          <td>{{ $t('coupon.list.ruleInfo.display.inside') }}</td>
          <td>{{ $t('coupon.list.ruleInfo.display.open') }}</td>
          <td />
          <td>{{ $t('coupon.list.ruleInfo.display.invisible') }}</td>
          <td />
          <td>{{ $t('coupon.list.ruleInfo.display.effective') }}</td>
          <td />
          <td />
        </tr>
        <tr>
          <td>{{ $t('coupon.list.ruleInfo.display.passed') }}</td>
          <td />
          <td />
          <td>{{ $t('coupon.list.ruleInfo.display.invisible') }}</td>
          <td />
          <td>{{ $t('coupon.list.ruleInfo.display.invalid') }}</td>
          <td />
          <td />
        </tr>
      </table>
      <table class="ruleTable">
        <tr>
          <td colspan="3">
            <h3>{{ $t('coupon.list.ruleInfo.usageRules.desc') }}</h3>
          </td>
        </tr>
        <tr>
          <td>1</td>
          <td>{{ $t('coupon.list.ruleInfo.usageRules.info.a') }}</td>
        </tr>
        <tr>
          <td>2</td>
          <td>{{ $t('coupon.list.ruleInfo.usageRules.info.b') }}</td>
        </tr>
        <tr>
          <td>3</td>
          <td>{{ $t('coupon.list.ruleInfo.usageRules.info.c') }}</td>
        </tr>
      </table>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleClose">{{ $t('common.operate.sure') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'UseRuleDialog',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    showState: {
      get: function() {
        return this.showDialog
      },
      set: function() {
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit('change-dialog', 'viewDialog', false)
    }
  }
}
</script>

<style lang="scss" scoped>
  .ruleTable{
    width: 100%;
    margin-top: 10px;
    border-collapse:collapse;
    h3{
      margin: 0;
    }
    tr{
      width: 100%;
      td{
        border: 1px solid #cccccc;
        padding: 10px;
        text-align: center;
      }
    }
  }
</style>
